<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>AngularJs Form Select</title>
</head>

<body ng-app="selectApp" ng-controller="selectCtrl">
<pre>colors = {{colors}}</pre>
<ul>
    <li ng-repeat="color in colors">
        Name:
        <input ng-model="color.name"> [
        <a href ng-click="colors.splice($index, 1)">X</a>]
    </li>
    <li>
        [<a href ng-click="colors.push({})">add</a>]
    </li>
</ul>
<hr/> 没有空项的SELECT：
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
<br> 第一个为空项的SELECT：
<select ng-model="myColor" ng-options="color.name for color in colors">
    <option value="">-- choose color --</option>
</select>
<br> 分组的SELECT：
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>
<hr/>
<div style="border:solid 1px black; height:20px" ng-style="{'background-color':myColor.name}"></div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script type="text/javascript">
angular.module('selectApp', []).controller('selectCtrl', function($scope) {
	$scope.colors = [
	    {name:'black', shade:'dark'},
	    {name:'white', shade:'light'},
	    {name:'red', shade:'dark'},
	    {name:'blue', shade:'dark'},
	    {name:'yellow', shade:'light'}
	  ];
	$scope.myColor = $scope.colors[2];
})
</script>
</body>

</html>
